<!-- src/main/resources/templates/custom-doc.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knife4j API文档 (自定义)</title>

    <!-- 设置基础路径 -->
    <base href="/">

    <!-- 其他头部资源... -->
    <script src="/webjars/knife4j-ui/4.4.0/dist/knife4j-ui-standalone-preset.js"></script>
    <link href="/webjars/knife4j-ui/4.4.0/dist/knife4j-ui.css" rel="stylesheet" />

    <script src="/webjars/knife4j-ui/4.4.0/dist/knife4j-ui-bundle.js"></script>
    <script src="/static/js/knife4j-encrypt-plugin.js"></script>


    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .knife4j-container {
                @apply min-h-screen flex flex-col;
            }
            .knife4j-header {
                @apply bg-primary text-white py-3 px-4 shadow-md;
            }
            .knife4j-body {
                @apply flex-1 flex overflow-hidden;
            }
            .knife4j-sidebar {
                @apply w-64 bg-light border-r border-gray-200 overflow-y-auto;
            }
            .knife4j-main {
                @apply flex-1 overflow-y-auto p-4;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50">
<!-- 自定义头部 -->
<div class="knife4j-header">
    <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-xl font-bold flex items-center">
            <i class="fa fa-code mr-2"></i>
            <span>API文档中心</span>
        </h1>
        <div class="flex items-center space-x-4">
            <button id="theme-toggle" class="p-2 rounded-full hover:bg-white/20 transition-colors">
                <i class="fa fa-moon-o"></i>
            </button>
            <button id="encrypt-toggle" class="bg-white/20 hover:bg-white/30 text-white px-3 py-1 rounded text-sm transition-colors">
                <i class="fa fa-lock mr-1"></i> 加密请求
            </button>
        </div>
    </div>
</div>

<!-- Knife4j容器 -->
<div class="knife4j-container" id="knife4j-container"></div>

<script>
    // 初始化Knife4j
    window.onload = function() {
        // 创建Knife4j实例
        const ui = window.Knife4j.create({
            dom_id: '#knife4j-container',
            url: '/v3/api-docs',
            docExpansion: 'list', // 文档默认展开方式
            defaultModelsExpandDepth: -1, // 隐藏模型定义
            presets: [
                window.Knife4j.presets.apis,
                window.Knife4j.presets.tagGroups
            ],
            plugins: [
                window.Knife4j.plugins.DarkMode // 启用暗色模式
            ]
        });

        // 设置密钥（实际项目中应通过安全方式获取）
        localStorage.setItem('aesSecretKey', '0123456789abcdef0123456789abcdef');

        // 主题切换按钮
        document.getElementById('theme-toggle').addEventListener('click', function() {
            const isDark = document.documentElement.classList.toggle('dark');
            localStorage.setItem('knife4j-theme', isDark ? 'dark' : 'light');
            this.innerHTML = isDark ? '<i class="fa fa-sun-o"></i>' : '<i class="fa fa-moon-o"></i>';
        });

        // 加密开关
        document.getElementById('encrypt-toggle').addEventListener('click', function() {
            const isEncrypt = !this.classList.contains('bg-success');
            this.className = isEncrypt
                ? 'bg-success hover:bg-success/80 text-white px-3 py-1 rounded text-sm transition-colors'
                : 'bg-white/20 hover:bg-white/30 text-white px-3 py-1 rounded text-sm transition-colors';
            this.innerHTML = isEncrypt
                ? '<i class="fa fa-lock mr-1"></i> 加密已开启'
                : '<i class="fa fa-unlock mr-1"></i> 加密已关闭';

            // 存储加密状态
            localStorage.setItem('knife4j-encrypt', isEncrypt ? 'enabled' : 'disabled');
        });

        // 初始化加密状态
        const encryptStatus = localStorage.getItem('knife4j-encrypt');
        if (encryptStatus === 'enabled') {
            document.getElementById('encrypt-toggle').className = 'bg-success hover:bg-success/80 text-white px-3 py-1 rounded text-sm transition-colors';
            document.getElementById('encrypt-toggle').innerHTML = '<i class="fa fa-lock mr-1"></i> 加密已开启';
        }
    };
</script>
</body>
</html>